<script setup lang="ts">
import { ref } from 'vue'

defineProps<{ msg: string }>()

let count = ref(0)

const plusSelf: any = () => {
  count.value = count.value * count.value;
}

let isShow = ref(false);

</script>

<template>
  <div class="hide"><input type="button" :value="`${isShow ? 'hide' : 'show'} hello world`" @click="isShow = !isShow"></div>
  <div v-if="isShow">
    <h1>{{ msg }}</h1>

    <div class="card">
      <div class="count-wrapper">
        <span class="count-text">Count:</span>
        <span class="count-num">{{ count }}</span>
      </div>
      <button type="button" @click="count++">count +1</button>
      <button type="button" @click="count += 2">count +2</button>
      <button type="button" @click="count *= 2">count x2</button>
      <button type="button" @click="plusSelf()">count x count</button>
      <p>
        Edit
        <code>components/HelloWorld.vue</code> to test HMR
      </p>
    </div>

    <p>
      Check out
      <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite
      starter
    </p>
    <p>
      Install
      <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
      in your IDE for a better DX
    </p>
    <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}

.count-wrapper {
  border: 1px solid orangered;
}

.count-text {
  color: orange;
  font-size: xx-large;
  font-weight: bold;
}

.count-num {
  color: orchid;
  font-size: large;
}
</style>
